<!--
 * @Author: 秦福凯
 * @Date: 2024-08-06 16:08:41
 * @Description: 多文件上传组件
 * @FilePath: \sx-school-oa\src\components\common\fileTable\fileTable.vue
-->
<template>
  <div class="dialog-title-box" >
    <span class="dialog-title-box-title" >{{title}}</span>
    <div class="header">
      <u-button @click="add" type="primary" plain icon="Plus" v-if="!isCheck" style="margin: 10px 0; ">{{btnsName}}</u-button>
    </div>
    <el-table v-if="refrashTab" :data="data" :border="true" v-bind="$attrs" :show-overflow-tooltip="true" style="max-height: 200px;overflow: auto;">
      <template v-for="item in colunm">
        <el-table-column
          v-if="['index','selection'].includes(item.type)"
          :type="item.type"
          :prop="item.key"
          :key="item.key"
          :label="item.label" 
          :width="item.width"
          :min-width="item.minWidth"
          :align="item.align || 'center'"
          :header-align="item.headerAlign || 'center'"/>
        <template v-else>
         <el-table-column 
          :label="item.label"
          :prop="item.key"
          :width="item.width"
          :min-width="item.minWidth"
          :align="item.align || 'center'"
          :fixed="item.fixed">
          <template #default="scope">
            <template v-if="item.ctype === 'delete'">
              <u-button v-if="!isCheck"  type="danger" icon="Delete" size="small" @click="delateD(scope.row)">删除</u-button>
            </template>
            <!-- 上传 -->
            <template v-else-if="item.ctype === 'upload'">
              <el-upload
              action="#"
              :auto-upload="false"
              :limit="1"
              :show-file-list="false"
              :on-change="(file, fileList) => {fileUpload(file, fileList,scope.row)}"
              >
              <el-button v-if="!isCheck"  type="primary" icon="Upload" size="small" >上传</el-button>
            </el-upload>
            </template>
            <!-- 下载 -->
            <template v-else-if="item.ctype === 'download'">
             <el-button color="#626aef"  v-if="scope.row.url" type="primary" icon="Download" size="small" >下载</el-button>
            </template>
            <!-- 预览 -->
            <template v-else-if="item.ctype === 'over'">
              <el-image
                preview-teleported="true"
                v-if="scope.row.contentType == 'image/png' ||scope.row.contentType == 'image/jpeg' ||scope.row.contentType == 'image/bmp'"
                style="width: 60px; height: 20px"
                :src="baseapi +'/' + scope.row.url"
                :preview-src-list="[baseapi +'/' + scope.row.url]"
                />
             </template>
          </template>
        </el-table-column>
        
      </template>
      </template>
    </el-table>
  </div>

</template>

<script setup>
import { ref, reactive} from 'vue'
import {baseapi} from '@/api/baseapi.ts'
const emits = defineEmits(['add','fileUpload'])
let props = defineProps({
  data:Array,
  title:{
    type:String,
    default:'附件上传'
  },
  isCheck:{
    type:Boolean,
    default:false,
  },
  btnsName:{
    type:String,
    default:'新增行'
  }
 })
let colunm = reactive([
  {type:'index',label:'序号',width:80,},
  {label:'附件名称',key:'originName',minWidth:160,},
  {label:'附件类型',key:'contentType',width:160},
  {label:'附件地址',key:'url',width:200},
  {label:'上传',key:'upload',width:120,ctype:'upload'},
  // {label:'下载',key:'export',width:120,ctype:'download'},
  {label:'预览(仅图片)',key:'overView',width:120,ctype:'over'},
  {label:'删除',key:'delete',width:120,ctype:'delete'},
])
// 新增行
let refrashTab = ref(true)
function add(){
  props.data.push({uuid:new Date().getTime()})
  emits('add')
  refrashTab.value = false
  nextTick(() =>{
    refrashTab.value = true
  })
  console.log(props.data)
}

// 删除行
function delateD(row){
  let index = props.data.findIndex(item => item == row)
  // 真实的删除
  console.log(row)
  if(row.id){
    ElMessageBox.confirm(
      '确认删除选中数据?',
      '系统提示',
      {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
    ).then(() =>{
      props.data.splice(index,1)
      refrashTab.value = false
      nextTick(() =>{
      refrashTab.value = true
      })
    })

  }else{
    // 添加行删除
    refrashTab.value = false
    nextTick(() =>{
      refrashTab.value = true
    })
   
    props.data.splice(index,1)
  }

 
}

// 文件上传
function fileUpload(file,list,item){
  let index = props.data.findIndex(citem => citem.uuid == item.uuid)
  props.data[index].originName = file.name
  props.data[index].contentType = file.raw.type
  emits('fileUpload',file,item,index)
  refrashTab.value = false
  nextTick(() =>{
  refrashTab.value = true
  })
}
</script>
<style lang='scss' scoped>

</style>